// 导出组件
export { default as Example } from './comp'

// 导出title 不导出使用文件夹名称
// export const title = 'use'

// 导出描述 
export const description = `useEffect 在函数组件中处理副作用`

// 导出组件代码文本
export const compstr = `
import React, { useState, useEffect } from 'react'

export default function Example() {
  const [show, setShow] = useState(false)
  return (<>
    <button onClick={()=>setShow(!show)}>{show?'隐藏':'显示'}组件</button>
    {show ? <Comp/> : ''}
  </>)
}

function Comp() {
  const [count, setCount] = useState(0)

  // 基本使用
  useEffect(() => {
    console.log('每次组件重新渲染 都会重新创建一个useEffect')
  })

  // 添加依赖  副作用函数在挂载的时候运行
  useEffect(() => {
    console.log('count 改变', count)
  }, [count])

  // 添加一个空依赖 副作用函数仅在挂载的时候运行
  useEffect(() => {
    const timer = setInterval(() => console.log('定时器'), 1000)
    return () => {
      // 返回一个清除函数, 在组件卸载前执行
      console.log('组件销毁');
      clearInterval(timer)
    }
  }, [])

  return (
    <div>
      <p>点击 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击</button>
    </div>
  )
}
 `